<template>
    <div class="todayNote" v-if="isHavingNote">
        <div class="upload" @click="dialogVisibleUpload = true">
            <img src="/icons/upload.png" />
            <span>继续上传</span>
        </div>
        <div class="todayNoteLeft">

            <el-timeline>
                <el-timeline-item :timestamp="formatDate(item.createdTime)" placement="top"
                    v-for="item in todayNoteList" :key="item.id">
                    <el-card>
                        <h4 class="title">{{ item.title }}</h4>
                        <div class="content">{{ item.description }}</div>
                        <div class="operation">
                            <el-button type="text" @click="noteDetails(item.id)">查看详情</el-button>
                            <el-button type="text" @click="deleteNote(item.id)">删除记录</el-button>
                        </div>
                    </el-card>
                </el-timeline-item>
            </el-timeline>
        </div>

        <div class="todayNoteRight">
            <el-card>
                <template #header>
                    <div class="title">
                        <img src="/centerIcons/title.png" style="width: 40px; margin-right: 10px" />
                        <text class="title">{{ noteDetail.title }}</text>
                    </div>

                    <img @click="editNoteDetail(noteDetail)" src="/centerIcons/edit.png" alt="" class="editIcon" />
                </template>
                <div class="content">
                    <img v-for="item in noteDetail.fileList" :key="item.id" class="image" :src="BaseUrl + item.filePath"
                        alt="" />
                </div>
                <template #footer>
                    <i>{{ noteDetail.description }}</i>
                </template>
            </el-card>
        </div>

        <!-- 更新笔记涉及到了文件的上传，文件的传入，暂时搁置，不太会实现 -->

        <el-dialog v-model="dialogVisibleEdit" title="Tips" draggable>
            <template #header>尊敬的小主,您来更新笔记啦！</template>
            <el-form class="form">
                <el-form-item label="标题:">
                    <el-input v-model="originalNoteDetail.title" placeholder="请输入标题" style="width: 160px"></el-input>
                </el-form-item>
                <el-form-item label="描述:">
                    <el-input v-model="originalNoteDetail.description" type="textarea"
                        placeholder="请简单描述您的笔记吧"></el-input>
                </el-form-item>
                <!-- 接收组件传递过来的文件 -->
                <Upload v-model:fileList="originalNoteDetail.fileList" />
            </el-form>

            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisibleEdit = false">取消</el-button>
                    <el-button type="primary" @click="dialogVisibleEdit = false">
                        更新笔记
                    </el-button>
                </div>
            </template>
        </el-dialog>

        <!-- 继续添加笔记的弹窗 -->
        <el-dialog v-model="dialogVisibleUpload" draggable class="dialog">
            <div class="dialog-header">
                <span class="dialog-title">上传新笔记啦！</span>
            </div>

            <div class="uploadContent">
                <el-form class="form">
                    <el-form-item label="标题:">
                        <el-input v-model="form.title" placeholder="请输入标题" style="width: 160px"></el-input>
                    </el-form-item>
                    <el-form-item label="描述:">
                        <el-input v-model="form.description" type="textarea" placeholder="请简单描述您的笔记吧"></el-input>
                    </el-form-item>
                    <!-- 接收组件传递过来的文件，同时将其绑定给表单的fileList属性 -->
                    <Upload v-model:fileList="form.fileList" />
                </el-form>

                <div class="copyWriting">
                    <i>{{ lizhi }}</i>
                </div>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisibleUpload = false">取消</el-button>
                    <el-button type="primary" @click="uploadForm()">上传</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
    <div class="noNote" v-else>
        <el-empty description="今天还没有笔记记录哟！" image-size="300px">
            <el-button type="primary" @click="dialogVisibleUpload = true">去上传</el-button>
        </el-empty>

        <el-dialog v-model="dialogVisibleUpload" draggable class="dialog">
            <div class="dialog-header">
                <span class="dialog-title">上传新笔记啦！</span>
            </div>

            <div class="uploadContent">
                <el-form class="form">
                    <el-form-item label="标题:">
                        <el-input v-model="form.title" placeholder="请输入标题" style="width: 160px"></el-input>
                    </el-form-item>
                    <el-form-item label="描述:">
                        <el-input v-model="form.description" type="textarea" placeholder="请简单描述您的笔记吧"></el-input>
                    </el-form-item>
                    <!-- 接收组件传递过来的文件，同时将其绑定给表单的fileList属性 -->
                    <Upload v-model:fileList="form.fileList" />
                </el-form>

                <div class="copyWriting">
                    <i>{{ lizhi }}</i>
                </div>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisibleUpload = false">取消</el-button>
                    <el-button type="primary" @click="uploadForm()">上传</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import _ from 'lodash';
import { onMounted, reactive, ref } from 'vue';
import { useStore } from 'vuex';
import { BaseUrl, deleteNoteRecord, getTodayNoteRecordsList, uploadFile } from '../../../server/userApi';
// 导入上传的组件
import Upload from '../../components/upload/FileUpload.vue';
// 导入自定义的时间过滤器
import { ElMessage } from 'element-plus';
import { formatDate } from '../../components/dateFilter/dateFilter.js';

const todayNoteList = ref([]);
const noteDetail = ref({});
const store = useStore();
const dialogVisibleUpload = ref(false);
const dialogVisibleEdit = ref(false);

// 存储笔记详情的样本，在修改的时候不影响原来的数据
const originalNoteDetail = ref({});

const isHavingNote = ref(true)
const fetchNotes = async () => {
    const data = await getTodayNoteRecordsList(store.state.userInfo.id);

    todayNoteList.value = data.data;
    // console.log(todayNoteList.value);
    if (todayNoteList.value.length === 0) {
        isHavingNote.value = false;
    } else {
        isHavingNote.value = true;
        noteDetail.value = { ...data.data[0] };
    }

};

onMounted(async () => {
    await fetchNotes();
});


const noteDetails = (id) => {
    const found = todayNoteList.value.find(item => item.id === id);
    if (found) {
        noteDetail.value = { ...found };
    }
    // console.log(originalNoteDetail.value);
};

// 编辑笔记,  涉及到的内容比较复杂   暂不考虑实现
const editNoteDetail = (noteDetail) => {
    // console.log(noteDetail)
    // originalNoteDetail.value = noteDetail.value;

    // 深拷贝:这样修改就不影响原来的数据，简单的赋值会影响原来的数据,由于这里是比较复杂的对象集合下面的方法已经不适合
    // originalNoteDetail.value = JSON.parse(JSON.stringify(found.fileList));

    // lodash深拷贝
    originalNoteDetail.value = _.cloneDeep(noteDetail);

    // 映射，将originalNoteDetail中的filePath转换为BaseUrl + filePath
    // originalNoteDetail.value =
    //     noteDetail.value.filePath.map((item) => {
    //         return `${BaseUrl}${item}`;
    //     });
    console.log(originalNoteDetail.value);
    dialogVisibleEdit.value = true
}


// 点击上传笔记
const form = reactive({
    title: '',
    description: '',
    fileList: []
})

const uploadForm = async () => {
    // 判断用户


    // 创建formData对象
    const params = new FormData();
    // 添加用户id,将用户id转为整型

    params.append('userId', store.state.userInfo.id);
    // 添加文本字段
    params.append('title', form.title);
    params.append('description', form.description);

    // 遍历文件列表
    for (let i = 0; i < form.fileList.length; i++) {
        params.append('fileList', form.fileList[i].raw);
    }

    // 请求接口
    console.log(params);
    const res = await uploadFile(params);
    console.log(res);
    if (res.code === 1265505) {
        ElMessage.success(res.message);

        await fetchNotes();
        form.title = '';
        form.description = '';
        form.fileList = [];
    }
    dialogVisibleUpload.value = false;
};

// 删除记录
const deleteNote = async (id) => {
    if (confirm('您确定删除这条记录吗？')) {
        const result = await deleteNoteRecord(id);
        if (result.code === 1265500) {
            ElMessage.success('删除成功');
            await fetchNotes();
        }
    }
}

</script>

<style scoped lang="scss">
.todayNote {
    width: 100%;
    display: flex;
    height: 666px;
    margin-top: 20px;
    position: relative;

    .upload {
        position: absolute;
        width: 80px;
        left: 220px;
        top: -28px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        img {
            width: 30px;
        }

        span {
            font-size: 10px;
            color: #ACACAC;
        }

        &:hover {
            cursor: pointer;
            transform: scale(1.1);

        }
    }

    .todayNoteLeft {
        width: 500px;
        height: 100%;
        overflow-y: scroll;

        .el-card {
            width: 95%;
            padding: 0;

            :deep(.el-card__body) {
                padding: 10px 20px 5px 20px;
            }

            .title {
                margin-bottom: 6px;
            }

            .content {

                width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }

        .load-more-trigger {
            height: 1px;
        }
    }

    .todayNoteRight {
        width: 100%;
        margin-left: 20px;
        margin-right: 20px;
        height: 100%;

        .el-card {
            flex: 1;

            :deep(.el-card__header) {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            .editIcon {
                width: 30px;
                cursor: pointer;

                // 添加浮动
                &:hover {
                    transform: scale(1.1);
                }
            }

            :deep(.el-card__body) {
                width: 100%;
                display: flex;
                flex-wrap: wrap;
            }

            .content {
                width: 94%;
                display: flex;
                flex-wrap: wrap;

                .image {
                    border-radius: 5px;
                    width: calc(33.33% - 20px);
                    /* Adjust the width to fit 3 images per row, considering the margin */
                    height: 200px;
                    margin: 10px;
                    object-fit: cover;
                    box-shadow: -1px -1px 1px rgb(83, 82, 82);
                    /* 图的覆盖 */

                }
            }
        }
    }

    // 弹出层
    .dialog {
        width: 800px;

        .dialog-header {
            margin-bottom: 12px;

            .dialog-title {
                width: 100%;
                margin-left: 35%;
                font-size: 28px;
                font-weight: bold;
            }
        }

        .uploadContent {
            display: flex;
            flex-direction: column;
        }

        .copyWriting {
            margin-top: 20px;
        }
    }
}
</style>
